<template>
    <!-- 订单管理 -->
    <div>
        <div class="buttonTop">
            <template>
                <el-select v-model="value" ref="select" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </template>
            &nbsp;
            <el-input v-model="input" ref="keyword" placeholder="请输入关键字" style="width: 150px"></el-input>&nbsp;
            <el-button type="primary" round @click="filter">查询</el-button>
            <el-button type="warning" round @click="resetFilter">重置</el-button>
        </div>
        <!-- 订单管理 -->

        <el-table
            :stripe="isStripe"
            ref="multipleTable"
            :data="ordersData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed="left" prop="id" label="订单编号" width="120"></el-table-column>
            <el-table-column prop="username" label="会员" width="120"></el-table-column>
            <el-table-column prop="productName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="category" label="商品分类" width="120"></el-table-column>
            <el-table-column prop="status" label="订单状态" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === '已发货 订单未完成'">
                        <el-tag>{{scope.row.status}}</el-tag>
                    </div>
                    <div v-if="scope.row.status === '未发货'">
                        <el-tag type="warning">{{scope.row.status}}</el-tag>
                    </div>
                    <div v-if="scope.row.status === '订单完成'">
                        <el-tag type="success">{{scope.row.status}}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div v-if="scope.row.status === '已发货 订单未完成'">
                        <el-button
                            size="mini"
                            @click="deliver(scope.row)"
                            type="primary"
                            disabled
                        >发货</el-button>
                        <el-button size="mini" @click="completeOrder(scope.row)" type="primary">订单完成</el-button>
                    </div>
                    <div v-if="scope.row.status === '未发货'">
                        <el-button size="mini" @click="deliver(scope.row)" type="primary">发货</el-button>
                        <el-button size="mini" type="primary" disabled>订单完成</el-button>
                    </div>
                    <div v-if="scope.row.status === '订单完成'">
                        <el-button
                            size="mini"
                            @click="deliver(scope.row)"
                            type="primary"
                            disabled
                        >发货</el-button>
                        <el-button size="mini" type="primary" disabled>订单完成</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <span class="demonstration">&nbsp;</span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage: 4,
            value: "",
            input: "",
            isStripe: true,
            options: [
                {
                    value: "已发货 订单未完成",
                    label: "已发货 订单未完成"
                },
                {
                    value: "未发货",
                    label: "未发货"
                },
                {
                    value: "订单完成",
                    label: "订单完成"
                }
            ],
            ordersData: [
                {
                    id: "boot-001",
                    username: "mark",
                    productName: "莱肯",
                    category: "超跑",
                    status: "订单完成"
                },
                {
                    id: "boot-002",
                    username: "mark",
                    productName: "柯尼塞格",
                    category: "超跑",
                    status: "未发货"
                },
                {
                    id: "boot-003",
                    username: "mark",
                    productName: "Mustang",
                    category: "超跑",
                    status: "已发货 订单未完成"
                },
                {
                    id: "boot-004",
                    username: "mark",
                    productName: "奥迪R8",
                    category: "超跑",
                    status: "订单完成"
                },
                {
                    id: "boot-005",
                    username: "mark",
                    productName: "保时捷911",
                    category: "超跑",
                    status: "未发货"
                }
            ],
            // 条件查询时使用
            backupData: [
                {
                    id: "boot-001",
                    username: "mark",
                    productName: "莱肯",
                    category: "超跑",
                    status: "订单完成"
                },
                {
                    id: "boot-002",
                    username: "mark",
                    productName: "柯尼塞格",
                    category: "超跑",
                    status: "未发货"
                },
                {
                    id: "boot-003",
                    username: "mark",
                    productName: "Mustang",
                    category: "超跑",
                    status: "已发货 订单未完成"
                },
                {
                    id: "boot-004",
                    username: "mark",
                    productName: "奥迪R8",
                    category: "超跑",
                    status: "订单完成"
                },
                {
                    id: "boot-005",
                    username: "mark",
                    productName: "保时捷911",
                    category: "超跑",
                    status: "未发货"
                }
            ]
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 获取多选框中的内容
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //发货
        deliver(row) {
            this.ordersData.forEach(element => {
                if (element.id == row.id) {
                    element.status = "已发货 订单未完成";
                }
            });
        },
        //订单完成
        completeOrder(row) {
            this.ordersData.forEach(element => {
                if (element.id == row.id) {
                    element.status = "订单完成";
                }
            });
        },
        // 查询方法
        filter() {
            // 满足条件的从backupData中添加到ordersData中
            this.ordersData = [];
            console.log("select value: " + this.$refs.select.value);
            console.log("keyword1 " + this.$refs.keyword.value);
            this.backupData.forEach(element => {
                console.log("keyword2 " + this.$refs.keyword.value == "null");
                // 对一个元素分别进行下拉列表筛选 和关键字筛选
                // 根据下拉列表选择的状态筛选
                if (element.status == this.$refs.select.value) {
                    this.ordersData.push(element);
                } else {
                    // 如果上面if有满足条件的元素 就不再对该元素进行关键字判断 所以关键字判断放到else里
                    if (this.$refs.keyword != "") {
                        if (
                            element.username.includes(this.$refs.keyword.value)
                        ) {
                            this.ordersData.push(element);
                        } else if (
                            element.productName.includes(
                                this.$refs.keyword.value
                            )
                        ) {
                            this.ordersData.push(element);
                        } else if (
                            element.category.includes(this.$refs.keyword.value)
                        ) {
                            this.ordersData.push(element);
                        }
                    }
                }
            });
            // this.ordersData = new Set(this.ordersData);
            // this.set.add(this.ordersData);
            // this.set.forEach(element => {
            //     console.log(element);
            // });
        },
        // 重置方法
        resetFilter() {
            this.ordersData = this.backupData;
            this.$refs.select = null;
            this.$refs.keyword = null;
        }
    }
};
</script>
<style scoped>
.buttonTop {
    float: left;
    margin-left: 60px;
}
</style>